<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.highLight{
				color: red;
			}
		</style>
	</head>
	<body>
		<input type="text" id="contentv" />
		<button type="button" id = "hi" >点击</button>
		<div id="div1">
			abc你好 dfsdfdsfsd 你好   dfsdfsdfsdf 你好
		</div>
	</body>
	<script type="text/javascript">
		document.getElementById("hi").onclick = run;
		function run(){
			var content = document.getElementById("div1").innerText;
			var remove = document.getElementById("contentv").value;
			/* 要解注释从以下开始注释 */
			/* 方法一 */
			document.getElementById("div1").innerHTML = content.replace(new RegExp(remove,'g'),`<span class = "highLight">`+remove+`</span>`);
			
			console.log(document.getElementsByClassName("highLight").length);
			if (document.getElementsByClassName("highLight").length > 0){
				var arr = document.getElementsByClassName("highLight");
				for(var i = 0; i < arr.length; i++){
					arr[i].style.background = 'yellow';
					arr[i].style.color = 'red';
					arr[i].style.fontWeight = 'bolder';
				}
			}
			
			/* 方法二 */
			// var arr = content.split(remove);
			// var sum = '';
			// for(var i = 0; i < arr.length; i++){
			// 	if(i < arr.length - 1){ 
			// 		sum = sum + arr[i] + `<span class='highLight'>`+remove+`</span>`;
			// 	}else{
			// 		sum = sum + arr[i];
			// 	}
			// 	 console.log(sum);
			// }
			// document.getElementById('div1').innerHTML=sum;
			
		}
		
		
	</script>
</html>
